<template>
  <div class="cate-nav">
    <div class="item" v-for="(item, index) in categoryList" :key="index" @click="toCateList(item.categoryId)">
      <img :src="item.imgUrl" alt="图片未加载成功" />
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
import { getCategoryNav } from '@/http/index.js'
export default {
  data() {
    return {
      categoryList: [],
    }
  },
  created() {
    this.fetchCategories()
  },
  methods: {
    fetchCategories() {
      getCategoryNav().then((res) => {
        this.categoryList = res.data
      })
    },
    toCateList(id) {
      this.$router.push(`/productList/${id}`)
    },
  },
}
</script>

<style lang="scss" scoped>
.cate-nav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 20px;
  .item {
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;
    img {
      width: 80px;
      height: 80px;
      margin: 26px auto 16px auto;
    }
  }
}
</style>
